Initially, we wanted to install the module "Views Fluid Grid - jQuery Masonry", a plug-in that created fluid grids. (See samples below - Before Masonry and After Masonry.)
Unfortunately, jQuery Masonry has not been updated for Drupal 7 and is, therefore, unavailable. So, we defaulted to "View Fluid Grid" which gives the "Before Masonry" result.
Step 2: Right click on "tar.gz (93.67 KB)", and select "Copy Link Location". Step 3: In your Drupal site, go to "Modules", "Install New Modules" and right click in "Install from a URL". Step 4: Click "Paste" and select "Install".
Step 5: Drupal redirects you to the "Update Manager". "Connection Method" should read "FTP". Enter your "Username", e.g., ccit123. Enter your password. Select "Continue".
Step 6: Select "Enable newly added modules".
Step 7: "Views Fluid Grid" requires that "Views" and "Chaos tools" (or "CTools") be installed and enabled. Check the box next to "Views Fluid Grid" and select "Save Configuration".
Step 8: Click on "Structure", "Add Content Field". Create a new content field. In this case, we named ours "Sample Graphic Design Work". Go to "Publishing Options" and deselect "Promoted to Front Page". Go to Display Settings" and deselect "Display Author". Go to "Comment Settings" and change "Default Comment Setting" to "Hidden". Click "Save and Add Fields".
Step 9: Under "Manage Fields", delete "Body". Add a new field. Change "Field" to "Image" and click "Save".
Step 10: Add content, in this case multiple images. Click on "Content", "Add Content", "Sample Graphic Design". Repeat this until all your images have been uploaded.
Step 11: Under "Structure" click on "Views" and "Add new view".
Step 12: Name the view and select show "Content" and the type of content you would like displayed. In our case our images were located under "Sample Graphic Design Work". Under "Display format" select "Fluid grid" of "full posts", "without links" and "without comments". Insert the number of items you would like displayed and click "Continue and Edit".
Step 13: Under "Format" click "Settings" beside "Fluid grid" you may edit the style options. We left the width to 200 and under "Advanced Layout Options" the margin to "None". Select "Apply (all displays)".
Step 14: Under "Format" > "Show" change the "Content" to "Fields" and select "Apply". Select "Apply" on the next page without changing any of the options.
Step 15: Under "Fields", click on "Content: Title" and deselect "Link this field to the original piece of content" and "Apply". Under "Fields", select "add" and select the location of your images. In our case, we selected "Content: Images". On the next window deselect "Create a label". Leave the "Image Style" to "None" and "Link Image to" "Nothing" and click "Apply".
Step 16: On the same page "Add block"and Click "Save".
Step 17: Under "Structure" > "Blocks" change where you would like your block to be displayed. In our case, we displayed it under "Footer". Click "Save blocks".
As you can see from the above screenshot, we achieved the expected results rather than the desired results from jQuery Masonry.
For those interested in achieving a result similar to Masonry, we recommend exploring jQuery Isotope.
Initially, we wanted to install the module "Views Fluid Grid - jQuery Masonry", a plug-in that created fluid grids. (See samples below - Before Masonry and After Masonry.)
Unfortunately, jQuery Masonry has not been updated for Drupal 7 and is, therefore, unavailable. So, we defaulted to "View Fluid Grid" which gives the "Before Masonry" result.
Step 1: download from http://drupal.org/project/views_fluidgrid
Step 2: Right click on "tar.gz (93.67 KB)", and select "Copy Link Location".
Step 3: In your Drupal site, go to "Modules", "Install New Modules" and right click in "Install from a URL".
Step 4: Click "Paste" and select "Install".
Step 5: Drupal redirects you to the "Update Manager". "Connection Method" should read "FTP". Enter your "Username", e.g., ccit123. Enter your password. Select "Continue".
Step 6: Select "Enable newly added modules".
Step 7: "Views Fluid Grid" requires that "Views" and "Chaos tools" (or "CTools") be installed and enabled. Check the box next to "Views Fluid Grid" and select "Save Configuration".
Step 8: Click on "Structure", "Add Content Field". Create a new content field. In this case, we named ours "Sample Graphic Design Work". Go to "Publishing Options" and deselect "Promoted to Front Page". Go to Display Settings" and deselect "Display Author". Go to "Comment Settings" and change "Default Comment Setting" to "Hidden". Click "Save and Add Fields".
Step 9: Under "Manage Fields", delete "Body". Add a new field. Change "Field" to "Image" and click "Save".
Step 10: Add content, in this case multiple images. Click on "Content", "Add Content", "Sample Graphic Design". Repeat this until all your images have been uploaded.
Step 11: Under "Structure" click on "Views" and "Add new view".
Step 12: Name the view and select show "Content" and the type of content you would like displayed. In our case our images were located under "Sample Graphic Design Work". Under "Display format" select "Fluid grid" of "full posts", "without links" and "without comments". Insert the number of items you would like displayed and click "Continue and Edit".
Step 13: Under "Format" click "Settings" beside "Fluid grid" you may edit the style options. We left the width to 200 and under "Advanced Layout Options" the margin to "None". Select "Apply (all displays)".
Step 14: Under "Format" > "Show" change the "Content" to "Fields" and select "Apply". Select "Apply" on the next page without changing any of the options.
Step 15: Under "Fields", click on "Content: Title" and deselect "Link this field to the original piece of content" and "Apply". Under "Fields", select "add" and select the location of your images. In our case, we selected "Content: Images". On the next window deselect "Create a label". Leave the "Image Style" to "None" and "Link Image to" "Nothing" and click "Apply".
Step 16: On the same page "Add block"and Click "Save".
Step 17: Under "Structure" > "Blocks" change where you would like your block to be displayed. In our case, we displayed it under "Footer". Click "Save blocks".
As you can see from the above screenshot, we achieved the expected results rather than the desired results from jQuery Masonry.
For those interested in achieving a result similar to Masonry, we recommend exploring jQuery Isotope.